O Projeto de Interface foi desenvolvido com o auxílio da ferramenta Figma, onde foi feito o design a partir de uma paleta pré-definida de cores. As telas foram desenvolvidas de maneira a atender os requisitos funcionais e não-funcionais previamente discutidos na Especificação do Projeto desse documento.
A seguir, serão exibidas as telas do projeto, seguidas de uma breve explicação a respeito das mesmas:
Ao abrir o website do Projeto Reciclamais no navegador, o usuário é encaminhado para a tela Home(Tela 1) onde é possível visualizar partes de algumas das notícias mais recentes, dados sobre a coleta de resíduos eletrônicos e informações sobre os locais de descarte de pilhas e baterias em Belo Horizonte. Caso o usuário clique em uma das notícias exibidas na tela Home(Tela 1), ele é encaminhado para a Tela 3, onde é possível visualizar a notícia completa. Outra possibilidade é que o usuário clique na aba de notícias exibida na barra de navegação, sendo assim encaminhado para a página Notícias(Tela 2), onde são exibidas todas as notícias publicadas no site.
Algumas funções do site, como o agendamento de coleta ou a visualização de perfil do usuário, só são acessíveis para usuários autenticados, portanto, se o usuário tentar realizar um agendamento ou acessar a área de perfil(ao clicar no ícone do canto superior direito da página), ele é encaminhado para a tela de Login(Tela 4). Na tela de Login(Tela 4), é possível realizar o login, recuperar a senha em caso de esquecimento e, caso o usuário ainda não possua uma conta, acessar a área de cadastro. No caso de o usuário não possuir uma conta, é possível selecionar a opção "Ainda não possuo uma conta" abaixo do botão "Enviar" na tela de Login(Tela 4), que o encaminhará para a área de cadastro exibida na Tela 6. Na área de cadastro(Tela 6), o usuário deve preencher as informações exigidas para que seja possível realizar o cadastro e, ao clicar em "Salvar", suas informações são salvas e o cadastro é realizado, encaminhando o usuário para a tela de confirmação de cadastro(Tela 5).
Uma vez logado no sistema, o usuário pode acessar a área de perfil ao clicar no ícone do canto superior direito da barra de navegação da página, sendo então encaminhado para a Tela 7, onde são exibidas as informações do usuário, as informações de agendamentos e a pontuação daquele usuário. A partir da área de perfil(Tela 7), o usuário pode alterar seus dados ao clicar em "Alterar dados", cancelar um agendamento ao clicar em "Cancelar agendamento" ou acessar a área de pontuação ao clicar em "Troque seus pontos". Caso o usuário clique em "Alterar dados", os campos de informações poderão ser alterados, como exibido na Tela 8, e salvos ao clicar em "Salvar alterações"(Tela 8). Caso o usuário opte por cancelar um agendamento, a tela exibirá uma confirmação de que o agendamento foi cancelado, como exibido na Tela 9.
Caso o usuário clique em "Troque seus pontos" na área de perfil(Tela 7), ele é encaminhado para a tela de pontuação(Tela 10). Na tela de pontuação(Tela 10) é possível obter o extrato das doações efetivadas, com a respectiva pontuação do eletrônico doado e o saldo final obtido. Há possilidade de realizar a troca dos pontos pelo benefício oferecido em parceria com a empresa parceira da Prefeitura. Na Tela 11 haverá a confirmação da troca efetivada.
Ao acessar a área de agendamento(Tela 12), o sistema oferecerá dia e horários pré-definidos para a coleta dos eletrônicos, devendo o usuário informar o item que irá doar e a quantidade, confirmar seus dados pessoais, principalmente seu endereço e confirmar o agendamento. Na Tela 13, haverá a confirmação do agendamento solicitado.
Ao clicar no ícone "Fale Conosco" no canto inferior direito do rodapé. o usuário é encaminhado para a Tela 14. Na Tela 14 de "dúvidas frequentes" os usuários podem acessar as respostas para as dúvidas mais básicas e frequentes relacionadas ao programa ReciclaMais ou acessar o "fale conosco" da Prefeitura de Belo Horizonte para obter outras informações que não estão disponíveis nesta página de dúvidas. Há também informações do "Quem somos nós?". Na Tela 15, haverá a confirmação do e-mail enviado com a dúvida do usuário.
O diagrama de fluxo pode ser observado na imagem a seguir:
A descrição do fluxo de usuário pode ser observada com mais detalhes no item 05 desse documento, onde é apresentada a Arquitetura da Solução. Para melhor ilustração do fluxo de usuário, foi desenvolvido através do site marvelapp.com um fluxo de usuário interativo, que pode ser acessado através do seguinte link: https://marvelapp.com/prototype/f86h40d.
O wireframe de baixa fidelidade base utilizado para desenvolver as telas anteriormente exibidas nesse documento pode ser visualizado na imagem abaixo:
